
<!-- 工单管理（小程序） -->
<template>
    <div class="page">
        <div class="nuclein-query">
            <div>工单管理（小程序）</div>
            <div style="margin-left: auto;">
                <!-- <el-button size="mini" type="primary" @click="handleAdd">添加工单</el-button> -->
            </div>
        </div>
        <div class="content-row">
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column prop="deviceName" label="设备名称" align="center" width="120">
                </el-table-column>
                <el-table-column prop="estateName" label="小区名称" align="center">
                </el-table-column>
                <el-table-column prop="maintenanceUserName" label="维修人员" align="center">
                </el-table-column>
                <el-table-column prop="workOrderNumber" label="工单号" align="center" width="120">
                </el-table-column>
                <el-table-column prop="count" label="工单状态" align="center">
                    <template slot-scope="scope">
                        <el-tag type="warning">待审核</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="图片" align="center">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.photo[0]" :preview-src-list="scope.row.photo"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="time" label="提交时间" align="center" width="120">
                </el-table-column>
                <el-table-column label="操作" align="center" width="160">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="handleEdit(scope.row.sysWorkApplyId)">审核</el-button>
                        <!-- <el-button size="mini" type="danger" @click="handleReject()">驳回</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pageLimit.page" :page-sizes="[10, 20, 30, 40]" :page-size="pageLimit.size"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <el-dialog title="审核" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="是否通过" :label-width="formLabelWidth">
                    <el-radio-group v-model="form.applyState">
                        <el-radio :label="1">通过</el-radio>
                        <el-radio :label="2">驳回</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="form.applyState == 2" label="驳回理由" :label-width="formLabelWidth">
                    <el-input v-model="form.applyMsg" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleReject()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { workOrderApprovalList, workOrderApprovalAudit } from '../../api/api'
import commonFunction from '../../utils/commonFunction'
import commonData from '../../utils/commonData'
export default {
  data () {
    return {
      pageLimit: {
        page: 1,
        size: 10
      },
      total: 10,
      tableData: [], // 抽屉详情数据
      dialogFormVisible: false,
      formLabelWidth: '120px',
      form: {
        applyState: 1,
        sysWorkApplyId: '',
        applyMsg: '',
        sysUserId: ''
      }
    }
  },
  created () {
    this.gitList()
  },
  methods: {
    // 审核按钮
    handleEdit (id) {
      this.dialogFormVisible = true
      this.form.sysWorkApplyId = id
    },

    handleReject () {
      workOrderApprovalAudit({ ...this.form }).then(res => {
        if (res.code === 0) {
          this.dialogFormVisible = false
          this.$message.success('审核通过')
        } else {
          this.$message.success(res.msg)
        }
      })
    },
    // 获取
    gitList () {
      workOrderApprovalList({ ...this.pageLimit }).then(res => {
        if (res.code == 0) {
          const { total, records } = res.page
          this.tableData = records.map(ite => {
            const time = commonFunction.getTimeFormat(+new Date(ite.time), 'YYYY-MM-DD hh:mm:ss')
            return {
              ...ite,
              time
            }
          })
          this.total = total
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 分页
    handleSizeChange (val) {
      this.pageLimit.size = val
      this.gitList()
    },
    handleCurrentChange (val) {
      this.pageLimit.page = val
      this.gitList()
    }
  }
}
</script>

<style scoped>
.page {
    position: relative;
    height: 100%;
}

.dialog_butt {
    height: 60px;
    width: 100%;
    position: fixed;
    bottom: 0px;
}

.nuclein-query {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #DCDFE6;
}

.device-type {
    display: flex;
    align-items: center;
    padding: 20px 20px 10px 20px;
}

.device-type>p {
    margin-right: 20px;
}

.content-row {
    overflow: hidden;
}

/* 分页 */
.pagination {
    width: 100%;
    padding: 20px;
    border-top: 1px solid #DCDFE6;
}
</style>
